<template>
  <div class="Nav">
    <router-link  class="nav-item" to="/goods" >
    点餐
    <i class="line"></i>
    </router-link>
    <router-link class="nav-item" to="/ratings" >
    评价({{commentNum}})
    <i class="line"></i>
    </router-link>
    <router-link class="nav-item" to="/seller" >
    商家
    <i class="line"></i>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      
    }
  },
  props:{
    commentNum:{
      type:Number,
      default:0
    }
  }
}
</script>


<style scoped>
.Nav{
    display:flex;
    widows: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e4e4e4
}
.nav-item{
   flex: 1;
   text-align: center;
   font-size: 13px;
   text-decoration: none;
   color: #666666;
   position: relative;
}
.Nav .active{
    color: #ffbb22;
}
.Nav .active .line{
    width: 20px;
    height: 2px;
    display: inline-block;
    background-color: #ffbb22;
    position: absolute;
    left:50%;
    bottom: 0;
    margin-left: -10px;

}
</style>